<template>
  <a-layout class="logincontent">
    <div class="loginform">
      <div class="imgBx">
        <div>
          <img
            :src="imgURL + 'home2.png'"
            alt="logo"
            title="logo"
            style="height: 300px; margin-left: 100px"
          />
        </div>
        <div style="margin-left: 80px; margin-top: 10px">
          <a-typography-title>在线图书管理系统</a-typography-title>
        </div>
      </div>
      <div class="loginBx">
        <a-form
          :model="manager"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
        >
          <a-typography-title style="text-align: center"
            >管理员登录</a-typography-title
          >
          <a-form-item label="账号" :wrapper-col="{ span: 15, offset: 4 }">
            <a-input v-model:value="manager.m_id" placeholder="请输入账号" />
          </a-form-item>
          <a-form-item label="密码" :wrapper-col="{ span: 15, offset: 4 }">
            <a-input-password
              v-model:value="manager.m_password"
              placeholder="请输入密码"
            />
          </a-form-item>
          <a-form-item :wrapper-col="{ span: 24, offset: 0 }">
            <a-row type="flex" justify="space-between">
              <a-button type="primary" @click="login"
                >登&nbsp;&nbsp; 录</a-button
              >
              <a-button type="primary" @click="goToPage()">用户界面</a-button>
              <a-button type="link" @click="goToRegister"
                >没有账号？立即注册</a-button
              >
            </a-row>
          </a-form-item>
        </a-form>
      </div>
    </div>
  </a-layout>
</template>
<script setup>
import { reactive } from "vue";
import { post, setLocalToken, tip } from "@/common";
import { useRouter } from "vue-router";
import { imgURL } from "../api/storage";

const router = useRouter();

//reactive 双向绑定响应框
const manager = reactive({
  m_id: "",
  m_password: "",
});
const goToPage = () => {
  // window.location.href = "http://energyshare-xjtu.com/";
};
const login = () => {
  post("/manager/mLogin", manager).then((res) => {
    const data = res.data;
    tip.success("登陆成功！");
    const token = data; //获取返回的令牌
    // 将令牌存储在本地
    setLocalToken(token);

    // 跳转至Home路由
    router.push({ path: "/m_home/index" });
  });
};
const goToRegister = () => {
  router.push({ path: "/m_register" });
};
</script>
<style>
.logincontent {
  display: flex;
  flex-direction: row;
  background-image: url("https://cbjpeanut.oss-cn-chengdu.aliyuncs.com/blockchainmanager/background.png");
  background-size: 100% 100%;
  background-attachment: fixed;

  width: 100%;
  height: 100%;
  min-width: 1800px;
  min-height: 1400px;

  justify-content: center;
  align-items: center;
}

.loginform {
  opacity: 0.95;
  background-color: #fff;
  min-width: 600px;
  height: 500px;
  width: 1000px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 15px 30px;
  padding: 30px 20px;
}

.imgBx {
  margin-top: 20px;
  flex-direction: column;
  float: left;
}

.loginBx {
  width: 400px;
  margin: 100px 50px;
  float: right;
}
</style>